<template>
  <div class="selected_dialog">
    <el-tabs v-model="activeName" class="selected_dialog_tab">
      <el-tab-pane :label="$t('custom.report.selectedWidgetsTotal') + ` ${widgetsTotal}`" name="widgets">
        <div class="selected_list" v-for="item in selectedWidgetsList" :key="item.id">
          <el-tooltip v-if="item.name&&item.name.length > 80" effect="dark" :content="item.name" placement="top">
            <div class="selected_list_item">
              <div class="selected_list_item_title">
                <div class="selected_list_item_title_text">{{ item.name.substr(0, 80) + '...' }}</div>
                <i class="el-icon-close" @click="handleItem(item)"></i>
              </div>
              <div class="selected_list_item_content">{{ item.description }}</div>
            </div>
          </el-tooltip>
          <div class="selected_list_item" v-else>
            <div class="selected_list_item_title">
              <div class="selected_list_item_title_text">{{ item.name }}</div>
              <i class="el-icon-close" @click="handleItem(item)"></i>
            </div>
            <div class="selected_list_item_content">{{ item.description }}</div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('custom.report.selectedSlicersTotal') + ` ${slicersTotal}`" name="slicers"
        v-if="!isPublicApi">
        <div class="selected_list" v-for="item in selectedSlicersList" :key="item.id">
          <el-tooltip v-if="item.name.length > 80" effect="dark" :content="item.name" placement="top">
            <div class="selected_list_item">
              <div class="selected_list_item_title">
                <div class="selected_list_item_title_text">{{ item.name.substr(0, 80) + '...' }}</div>
                <i class="el-icon-close" @click="handleItem(item)"></i>
              </div>
              <div class="selected_list_item_content">{{ item.description }}</div>
            </div>
          </el-tooltip>
          <div class="selected_list_item" v-else>
            <div class="selected_list_item_title">
              <div class="selected_list_item_title_text">{{ item.name }}</div>
              <i class="el-icon-close" @click="handleItem(item)"></i>
            </div>
            <div class="selected_list_item_content">{{ item.description }}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import bus from '@/components/storybook/utilties/bus'
import { slicerGadgetTypeList } from '@/utils/data-json.js'
export default {
  inject: {dataFrom:{default:''}},
  data () {
    return {
      activeName: 'widgets',
      selectedWidgetsList: [],
      selectedSlicersList: [],
      templateList: [],
      list: [],
      pageHeaderList: ['', 'pageheadergadget', 'pageheadergadgetnexticket']
    }
  },
  props: ['selectedList', 'selectedTotal'],
  computed: {
    widgetsTotal () {
      return this.selectedWidgetsList.length
    },
    slicersTotal () {
      return this.selectedSlicersList.length
    },
    isPublicApi () {
      return this.dataFrom === 'publicApi'
    }
  },
  watch: {
    selectedList (value) {
      if (Array.isArray(value) && value.length && this.isPublicApi) {
        this.list = [...value]
        this.selectedWidgetsList = [...value]
      } else if (Array.isArray(value) && value.length) {
        this.list = [...value].filter(v=>v.com)
        this.templateList = this.list.filter(v => this.pageHeaderList.includes(v.com))
        this.selectedSlicersList = this.list.filter(v => slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com))
        this.selectedWidgetsList = this.list.filter(v => !slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com))
      }
    }
  },
  created () {
    if (Array.isArray(this.selectedList) && this.selectedList.length && this.isPublicApi) {
      this.list = [...this.selectedList]
      this.selectedWidgetsList = [...this.selectedList]
    } else if (Array.isArray(this.selectedList) && this.selectedList.length) {
      this.list = [...this.selectedList].filter(v=>v.com)
      this.templateList = this.list.filter(v => this.pageHeaderList.includes(v.com))
      this.selectedSlicersList = this.list.filter(v => slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com))
      this.selectedWidgetsList = this.list.filter(v => !slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com))
    }
    bus.$on('event:selectWidget', (data) => {
      this.filterList(data || [], 'widget')
    })
    bus.$on('event:selectSlicer', (data) => {
      this.filterList(data || [], 'slicer')
    })
  },
  beforeDestroy () {
    bus.$off('event:selectWidget')
    bus.$off('event:selectSlicer')
  },
  methods: {
    handleItem (item) {      
      if(this.isPublicApi){
        try {
          this.list = this.list.filter(v => v.resourceId !== item.resourceId)
          this.selectedWidgetsList = [...this.list]
        } catch (error) {
        }
        this.$emit('update:selectedList', [...this.selectedWidgetsList])
        this.$emit('update:selectedTotal', this.selectedWidgetsList.length)
        // bus.$emit('event:updateGadgets', this.list.filter(v => v.resourceId !== item.resourceId))
      }else{
        this.$emit('update:selectedList', this.list.filter(v => v.id !== item.id))
        try {
          this.list = this.list.filter(v => v.id !== item.id)
          this.templateList = this.list.filter(v => this.pageHeaderList.includes(v.com))
          this.selectedSlicersList = this.list.filter(v => slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com))
          this.selectedWidgetsList = this.list.filter(v => !slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com))
        } catch (error) {
  
        }
        this.$emit('update:selectedTotal', this.selectedSlicersList.length + this.selectedWidgetsList.length)
        // bus.$emit('event:updateGadgets', this.list.filter(v => v.id !== item.id))
      }
    },
    filterList (list, type) {
      if (type === 'slicer') {
        this.selectedSlicersList = list.filter(v => slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com)).filter(v=>v.com)
      } else if (type === 'widget') {
        if(this.isPublicApi){
          this.selectedWidgetsList = [...list]
        }else{
          this.selectedWidgetsList = list.filter(v => !slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com)).filter(v=>v.com)
        }
      } else {
        this.selectedSlicersList = this.list.filter(v => slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com)).filter(v=>v.com)
        this.selectedWidgetsList = this.list.filter(v => !slicerGadgetTypeList.includes(v.com) && !this.pageHeaderList.includes(v.com)).filter(v=>v.com)
      }
      this.$emit('update:selectedList', [...this.templateList, ...this.selectedWidgetsList, ...this.selectedSlicersList])
      this.$emit('update:selectedTotal', this.selectedSlicersList.length + this.selectedWidgetsList.length)
    }
  }

}
</script>

<style lang="scss" scoped>
.el-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;

  &>.el-tabs__header {
    margin-bottom: 0;
  }

  &>.el-tabs__content {
    flex: 1;

    &>.el-tab-pane {
      height: 100%;
    }
  }
}
</style>
